<template>
  <div>
    <raiders-top />
    <div class="body">
      <div class="container">
        <div>
          <span></span>
          <router-link to="/">王者荣耀首页</router-link> &nbsp;>&nbsp; 局内道具
        </div>
        <div>
          <div>
            <span>{{ title }}</span>
          </div>
          <ul>
            <li @click="cur = 'yingxiong'" :class="{ cur: cur == 'yingxiong' }">
              英雄
            </li>
            <li @click="cur = 'daoju'" :class="{ cur: cur == 'daoju' }">
              局内道具
            </li>
            <li @click="cur = 'jineng'" :class="{ cur: cur == 'jineng' }">
              召唤师技能
            </li>
          </ul>
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import RaidersTop from "@/components/RaidersTop.vue";
export default {
  components: { RaidersTop },
  watch: {
    cur(v) {
      if (v == "yingxiong") {
        this.title = "英雄";
        this.$router.push("/ziliao/yingxiong");
      }
      if (v == "daoju") {
        this.title = "局内道具";
        this.$router.push("/ziliao/daoju");
      }
      if (v == "jineng") {
        this.title = "召唤师技能";
        this.$router.push("/ziliao/jineng");
      }
    },
  },
  data() {
    return {
      title: "英雄",
      cur: this.$route.path.split("/").pop(),
    };
  },
};
</script>

<style lang="scss" scoped>
.body {
  background-image: linear-gradient(180deg, rgb(211, 219, 230) 0, white 60%);
  .container {
    padding-top: 22px;
    margin: 0 auto;
    width: 1200px;
    // height: 5000px;
    // border: 1px solid red;
    > div:first-child {
      > span {
        width: 18px;
        height: 20px;
        display: inline-block;
        background-image: url("/public/img/sprite.png");
        background-position: 0 0px;
        background-repeat: no-repeat;
      }
      .router-link-active {
        color: black;
        padding-left: 10px;
      }
    }
    > div:nth-child(2) {
      margin-top: 40px;
      > div:first-child {
        > span {
          font-weight: bold;
          font-size: 16px;
          background-repeat: no-repeat;
          background-image: url("//game.gtimg.cn/images/yxzj/web201605/page/icon_hero.png");
          display: inline-block;
          padding-left: 24px;
        }
      }
      > ul {
        margin-top: 20px;
        color: 16px;
        display: flex;
        > li {
          cursor: pointer;
          line-height: 32px;
          text-align: center;
          width: 33.33%;
          border-bottom: 3px solid rgb(212, 212, 212);
          &.cur {
            color: rgb(53, 137, 221);
            border-bottom-color: rgb(53, 137, 221);
          }
        }
      }
    }
  }
}
</style>